<template>
  <Select/>
  <Search/>
  <Date/>
  <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55"/>
    <el-table-column label="Date" width="120">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column property="name" label="Name" width="120"/>
    <el-table-column property="code" label="Code" width="120"/>
    <el-table-column property="classification" label="classification" width="120"/>
    <el-table-column property="Industry" label="Industry" width="120"/>
    <el-table-column property="address" label="Address" show-overflow-tooltip/>
  </el-table>
  <div style="margin-top: 20px">
    <el-button type="primary">生成企业画像</el-button>
    <el-button type="primary">生成企业报表</el-button>
    <!--    <el-button @click="toggleSelection([tableData[1], tableData[2]])"-->
    <!--    >Toggle selection status of second and third rows-->
    <!--    </el-button-->
    <!--    >-->
    <!--    <el-button @click="toggleSelection()">Clear selection</el-button>-->
  </div>
  <!--  分页器-->
  <div class="page">
    <el-pagination
        background layout="prev, pager, next"
        :page-size="2"
        :pager-count="11"
        :default-page-size="2"
        :hide-on-single-page='false'
        :total="tableData.length"/>


  </div>

</template>


<script lang="ts">
import {ref} from 'vue'
import {ElTable} from 'element-plus'
import date from "@/components/EnterprisePortrait/Date.vue";
import Search from "@/components/EnterprisePortrait/Search.vue";
import Select from "@/components/EnterprisePortrait/Select.vue";
import Date from "@/components/EnterprisePortrait/Date.vue";
export default {

  name: "EnterprisePortrait",
  components: {
    date,
    Search,
    Select,
    Date
  },
  setup() {

    interface User {
      date: string
      name: string
      address: string
      code: string
      classification: string
      Industry: string
    }

    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    const multipleSelection = ref<User[]>([])
    const toggleSelection = (rows?: User[]) => {
      if (rows) {
        rows.forEach((row) => {
          // TODO: improvement typing when refactor table
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          // @ts-expect-error
          multipleTableRef.value!.toggleRowSelection(row, undefined)
        })
      } else {
        multipleTableRef.value!.clearSelection()
      }
    }
    const handleSelectionChange = (val: User[]) => {
      multipleSelection.value = val
    }

    const tableData: User[] = [
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        code: '10011',
        classification: '3',
        Industry: '2'
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        code: '10012',
        classification: '3', Industry: '2'
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        code: '10010',
        classification: '3', Industry: '2'
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        code: '10010',
        classification: '3', Industry: '2'
      },
      {
        date: '2016-05-08',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        code: '10010',
        classification: '3', Industry: '2'
      },
      {
        date: '2016-05-06',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        code: '10010',
        classification: '3', Industry: '2'
      },
      {
        date: '2016-05-07',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        code: '10010',
        classification: '3', Industry: '2'
      },
    ]
    //console.log(tableData)
    return {
      multipleTableRef, multipleSelection, toggleSelection, handleSelectionChange, tableData
    }
  }

}

</script>

<style scoped>
.el-pagination {
  justify-content: center;
  margin-top: 30px
}
</style>